<template>
  <div class="register-data">
    <data-header name="系统访问数据" :type=1></data-header>

    <div class="chart-box">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :lg="14">
          <!--折线图-->
          <div class="line-chart">
            <div class="chart-title">系统访问数据</div>

            <div class="time-type">
              <span @click="select(1)" class="time-block" :class="{'positive':positiveType===1}">日</span>
              <span @click="select(2)" class="time-block" :class="{'positive':positiveType===2}">周</span>
              <span @click="select(3)" class="time-block" :class="{'positive':positiveType===3}">月</span>
            </div>

            <visitor-line-chart :impChartData="impData"></visitor-line-chart>
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="10">
          <div class="pie-chart">
            <div class="chart-title">总访问量模块比例图</div>
            <pie-chart :pieData="pieData" pieName="总访问量"/>

          </div>

          <div class="pie-chart-data">
            <div class="pie-chart-data-legend1">
              <div class="pie-chart-cell-box">
                <span class="pie-chart-cell-color"></span>
                <span class="pie-chart-cell-title">蓝聘余额：<strong>{{balance}}次</strong></span>
              </div>
              <div class="pie-chart-cell-box">
                <span class="pie-chart-cell-color cell-color3"></span>
                <span class="pie-chart-cell-title">招工：<strong>{{work}}次</strong></span>
              </div>
              <div class="pie-chart-cell-box">
                <span class="pie-chart-cell-color cell-color5"></span>
                <span class="pie-chart-cell-title">看看：<strong>{{look}}次</strong></span>
              </div>
              <div class="pie-chart-cell-box">
                <span class="pie-chart-cell-color cell-color7"></span>
                <span class="pie-chart-cell-title">个人中心：<strong>{{personal}}次</strong></span>
              </div>
              <div class="chart-total">
                <span>总访问次数：<strong>{{userTotal}}人</strong></span>
              </div>
            </div>
            <div class="pie-chart-data-legend2">
              <div class="pie-chart-cell-box">
                <span class="pie-chart-cell-color cell-color2"></span>
                <span class="pie-chart-cell-title">圈子：<strong>{{circle}}次</strong></span>
              </div>
              <div class="pie-chart-cell-box">
                <span class="pie-chart-cell-color cell-color4"></span>
                <span class="pie-chart-cell-title">积分：<strong>{{score}}次</strong></span>
              </div>
              <div class="pie-chart-cell-box cell-padding">
                <span class="pie-chart-cell-color cell-color6"></span>
                <span class="pie-chart-cell-title">活动中心：<strong>{{activity}}次</strong></span>
              </div>
              <span class="chart-total-num">有效访问次数：<strong>{{effectTotal}}次</strong></span>
            </div>

          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import DataHeader from "../components/DataHeader";
  import VisitorLineChart from "../components/VisitorLineChart";
  import PieChart from "../components/PieChart";
  import {Loading} from 'element-ui';
  import {formatDate} from "@/utils/index";
  import {getVisitLineData, getVisitPieData} from "../../../api/user/user";

  export default {
    name: "visitorData",
    components: {
      DataHeader,
      VisitorLineChart,
      PieChart
    },
    data() {
      return {
        chartData: {
          day: {
            xData: [],
            spontaneousData: [],
            salesmanData: [],
            residentData: [],
            employeeData: [],
            lookData: [],
            activityData: [],
            personData: []
          },
          week: {
            xData: [],
            spontaneousData: [],
            salesmanData: [],
            residentData: [],
            employeeData: [],
            lookData: [],
            activityData: [],
            personData: []
          },
          month: {
            xData: [],
            spontaneousData: [],
            salesmanData: [],
            residentData: [],
            employeeData: [],
            lookData: [],
            activityData: [],
            personData: []
          }
        },
        positiveType: 1,
        impData: {},
        pieData: {
          legendData: ['蓝聘余额', '圈子', '招工', '积分', '看看', '活动中心', '个人中心'],
          seriesData: [],
          colorData: ['#FF913D', '#FFCB3D', '#3CAFFF', '#1ED7DE', '#AB8AE6', '#08CC84', '#FD506E']
        },
        balance: 0,
        circle: 0,
        work: 0,
        score: 0,
        look: 0,
        activity: 0,
        personal: 0,
        userTotal: 0,
        effectTotal: 0
      }
    },
    created() {
      this.getPageData();
    },
    methods: {
      getPageData() {
        let loading = Loading.service({
          text: '拼命加载中....',
          lock: false,
          background: 'rgba(0, 0, 0, 0.5)'
        });

        let pie = this.getPieData(loading);
        let line = this.getLineData(this.positiveType);

        Promise.all([pie, line]).then(array => {
          //处理pie数据
          const pieObj = array[0];
          if (pieObj.length > 0) {
            for (let pie in pieObj) {
              if (pieObj[pie].type != 8 && pieObj[pie].type != 9) {
                let tempPie = {};
                tempPie.name = this.changePieName(pieObj[pie].type, pieObj[pie].num);
                tempPie.value = pieObj[pie].num;
                this.pieData.seriesData.push(tempPie);
              } else {//8系统总访问次数 9系统有效访问次
                if (pieObj[pie].type == 8) {
                  this.userTotal = pieObj[pie].num;
                }
                if (pieObj[pie].type == 9) {
                  this.effectTotal = pieObj[pie].num;
                }
              }
            }
          }

          //处理line数据
          const lineObj = array[1];
          this.disposeData(lineObj);

          loading.close();
        });
      },
      getPieData(loading) {//获取pie数据
        return new Promise((resolve,reject) => {
          getVisitPieData().then((res) => {
            let retObj = res;
            loading.close();
            if (retObj.code == 0 && retObj.data != null) {
              let pieObj = retObj.data;
              resolve(pieObj);
            }
          }).catch((error) => {
            loading.close();
            reject(error)
          })
        })
      },
      async select(type) {
        let loading = Loading.service({
          text: '拼命加载中....',
          lock: false,
          background: 'rgba(0, 0, 0, 0.5)'
        });

        this.positiveType = type;
        await this.getLineData(this.positiveType).then((lineObj => {
          this.disposeData(lineObj);
        }));
        loading.close();
      },
      changePieName(type, value) {//1蓝聘余额 2圈子 3招工 4积分 5看看 6活动中心 7个人中心
        let name = '';
        if (type == 1) {
          name = '蓝聘余额';
          this.balance = value;
        } else if (type == 2) {
          name = '圈子';
          this.circle = value;
        } else if (type == 3) {
          name = '招工';
          this.work = value;
        } else if (type == 4) {
          name = '积分';
          this.score = value;
        } else if (type == 5) {
          name = '看看';
          this.look = value;
        } else if (type == 6) {
          name = '活动中心';
          this.activity = value;
        } else if (type == 7) {
          name = '个人中心';
          this.personal = value;
        }
        return name;
      },
      getLineData(type) {//获取折线图数据
        return new Promise((resolve) => {
          getVisitLineData(type).then((res) => {
            let retObj = res;

            if (retObj.code == 0) {
              resolve(retObj);
            }
          }).catch((error) => {
            reject(error)
          })
        });
      },
      disposeData(lineObj) {
        if (lineObj.data != null) {
          let {value2, value3, value4, value5, value6, value7, value8, value1} = lineObj.data;
          if (this.positiveType == 1) {//日
            let xDay = value1.map((param) => {
              return `${param.split('-')[1]}月${param.split('-')[2]}日`;
            });
            this.chartData.day.xData = xDay;
            this.chartData.day.spontaneousData = value2;//蓝聘余额
            this.chartData.day.salesmanData = value3;//圈子
            this.chartData.day.residentData = value4;//招工
            this.chartData.day.employeeData = value5;//积分
            this.chartData.day.lookData = value6;//看看
            this.chartData.day.activityData = value7;//活动中心
            this.chartData.day.personData = value8;//个人中心

            this.impData = this.chartData['day'];
          } else if (this.positiveType == 2) {//周
            let xWeek = value1.map((param) => {
              let preWeek = param.split('#')[0];
              let nextWeek = param.split('#')[1];
              return `${preWeek.split('-')[1]}月${preWeek.split('-')[2]}日-${nextWeek.split('-')[1]}月${nextWeek.split('-')[2]}日`;
            });

            this.chartData.week.xData = xWeek;
            this.chartData.week.spontaneousData = value2;
            this.chartData.week.salesmanData = value3;
            this.chartData.week.residentData = value4;
            this.chartData.week.employeeData = value5;
            this.chartData.week.lookData = value6;
            this.chartData.week.activityData = value7;
            this.chartData.week.personData = value8;
            this.impData = this.chartData['week'];
          } else if (this.positiveType == 3) {//月
            let xMonth = value1.map((param, index) => {
              let temp = '';
              if (index == value1.length - 1) {
                let current = formatDate(new Date(), 'dd日');
                temp = `${param.split("-")[1]}月(至${current}数据)`;
              } else {
                temp = `${param.split("-")[1]}月`;
              }
              return temp;
            });

            this.chartData.month.xData = xMonth;
            this.chartData.month.spontaneousData = value2;
            this.chartData.month.salesmanData = value3;
            this.chartData.month.residentData = value4;
            this.chartData.month.employeeData = value5;
            this.chartData.month.lookData = value6;
            this.chartData.month.activityData = value7;
            this.chartData.month.personData = value8;
            this.impData = this.chartData['month'];
          }
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .register-data {
    background: #F0F2F5;
    .chart-box {
      padding: 20px;
      .line-chart {
        height: 720px;
        background: #fff;
        margin-bottom: 20px;
        .chart-title {
          font-size: 18px;
          font-weight: bold;
          color: rgba(61, 68, 77, 1);
          padding-top: 30px;
          padding-bottom: 35px;
          padding-left: 24px;
        }
        .time-type {
          display: flex;
          margin-left: auto;
          margin-right: 48px;
          width: 120px;
          height: 24px;
          background: rgba(240, 242, 245, 1);
          border: 1px solid rgba(216, 220, 229, 1);
          border-radius: 4px;
          margin-bottom: 8px;
          .time-block {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            border-right: 1px solid rgba(216, 220, 229, 1);
            cursor: pointer;
            font-size: 12px;
            color: rgba(96, 98, 102, 1);
            &.positive {
              background: rgba(60, 175, 255, 1);
              color: #fff;
            }
            &:last-child {
              border-right: none;
            }
          }
        }
      }
      .pie-chart {
        height: 400px;
        background: #fff;
        margin-bottom: 20px;
        .chart-title {
          font-size: 18px;
          font-weight: bold;
          color: rgba(61, 68, 77, 1);
          padding-top: 30px;
          padding-bottom: 48px;
          padding-left: 24px;
        }
        &-data {
          display: flex;
          height: 300px;
          background: #fff;
          .pie-chart-cell-box {
            display: flex;
            align-items: center;
            padding-bottom: 28px;
            .pie-chart-cell-color {
              width: 12px;
              height: 12px;
              background: #3CAFFF;
            }
            .cell-color2 {
              background: #08CC84;
            }
            .cell-color3 {
              background: #1ED7DE;
            }
            .cell-color4 {
              background: #FFCB3D;
            }
            .cell-color5 {
              background: #AB8AE6;
            }
            .cell-color6 {
              background: #FF913D;
            }
            .cell-color7 {
              background: #FD506E;
            }
            .pie-chart-cell-title {
              margin-left: 16px;
              font-size: 14px;
              color: rgba(61, 68, 76, 1);
            }
          }
          &-legend1 {
            display: flex;
            flex-direction: column;
            padding-left: 60px;
            padding-top: 60px;
            .chart-total {
              font-size: 16px;
              font-weight: bold;
              color: rgba(60, 175, 255, 1);
            }
            @media screen and (min-width: 1440px) and(max-width: 1600px) {
              padding-left: 30px;
            }
            @media screen and (min-width: 1280px) and(max-width: 1440px) {
              padding-left: 30px;
            }
          }
          &-legend2 {
            display: flex;
            flex-direction: column;
            padding-left: 120px;
            padding-top: 60px;
            .chart-total-num {
              font-size: 16px;
              font-weight: bold;
              color: rgba(60, 175, 255, 1);
              padding-top: 45px;
            }
            @media screen and (min-width: 1440px) and(max-width: 1600px) {
              padding-left: 60px;
            }
            @media screen and (min-width: 1280px) and(max-width: 1440px) {
              padding-left: 30px;
            }
          }
        }
      }
    }
  }
</style>
